<template>
    <view class="page">
        <!-- 勘查员订单详情 -->
        <back :isBack="true" :title="'订单详情'"></back>
        <scroll-view scroll-y class="concent_box">
            <view class="fubiaoti_box"><u-icon name="arrow-rightward" color="rgba(26, 194, 121, 1)" size="28"
                    style="margin-right:15rpx;"></u-icon>{{ orderObj.status == '3' ? '待清运' : orderObj.status == '5' ?
            '已完成' : orderObj.status == '-1'
                ? '已退款' : orderObj.status == '0' ? '已取消' : orderObj.status == '1' ? '待支付' : orderObj.status == '2' ?
                    '待勘测' : '' }}
            </view>
            <view class="dd_box">订单编号：{{ orderObj.first_order_sn }}</view>
            <!-- 用户预约信息 -->
            <view class="dange_order_box">
                <view class="orderNum_box">
                    <view class="left_lv_box"></view>
                    <view class="zs_order_num_box">{{ admin != '1' ? '' : '用户' }}预约信息</view>
                </view>

                <view class="zc_type_box">
                    <view class="le_box">
                        <view class="cc_box">
                            <image :src="orderObj.product_img" mode="scaleToFill" />
                        </view>
                        <view class="xx_box">
                            <view class="xx_top_box">{{ orderObj.product_name }}</view>
                            <view class="xx_bot_box">
                                按{{ orderObj.category_name }}拉
                                <view v-if="orderObj.position_name"
                                    style="width: 8rpx;height: 8rpx;margin: 0 6rpx; border-radius: 50%;background-color: rgba(204, 204, 204, 1);">
                                </view>
                                <text v-if="orderObj.position_name">
                                    {{ orderObj.position_name }}
                                </text>
                            </view>
                        </view>
                    </view>
                    <view class="r_box">
                        <view class="daishu_box">
                            <text style="color:rgba(255, 141, 26, 1);font-size: 20rpx;">¥</text>
                            <text style="font-weight: 700;color:rgba(255, 141, 26, 1);font-size: 36rpx;">{{
            orderObj.product_price
        }}</text>
                            /{{ orderObj.category_name }}
                        </view>
                        <view class="yg_box">预估{{ orderObj.num * 1 }}{{ orderObj.category_name }}</view>
                    </view>
                </view>

                <view class="zclx_box">
                    <view class="xing_box">
                        <view style="margin-right: 14rpx;color:rgba(128, 128, 128, 1);">预约人:</view>
                        <view style="font-size: 28rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">{{
            orderObj.real_name }}
                        </view>
                    </view>
                    <view class="xing_box">
                        <view style="margin-right: 14rpx;color:rgba(128, 128, 128, 1);">联系电话:</view>
                        <view style="font-size: 28rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">{{ orderObj.phone }}
                        </view>
                    </view>
                    <view class="xing_box">
                        <view style="margin-right: 14rpx;color:rgba(128, 128, 128, 1);">装车方式:</view>
                        <view style="font-size: 28rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">{{
            orderObj.vehicle_method }}
                        </view>
                    </view>
                    <view class="xing_box">
                        <view style="margin-right: 14rpx;color:rgba(128, 128, 128, 1);">时间：</view>
                        <view style="font-size: 28rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">{{
            orderObj.appointment_time }}</view>
                    </view>
                    <view class="dizhi_box">
                        <view style="color:rgba(128, 128, 128, 1);">地址：</view>
                        <view style="width:460rpx; display: flex;justify-content: flex-end;align-items: center;">
                            <view class="jt_box" style="font-size: 28rpx;font-weight: 500;color: rgba(0, 0, 0, 1);">
                                {{
            orderObj.location }}</view>
                            <view><u-icon name="map-fill" size="28" color="rgba(166, 166, 166, 1)"></u-icon></view>
                        </view>
                    </view>
                </view>

                <view v-if="orderObj.category_id == '2'"
                    style="margin: auto;width: 636rpx;border: 2rpx solid rgba(245, 245, 245, 1);"></view>
                <view class="yuyue" v-if="orderObj.category_id == '2'"
                    style="display: flex; justify-content: space-between;align-items: center;"><text
                        style="color:rgba(128, 128, 128, 1);">预约车型：</text>
                    <text>
                        {{ orderObj.vehicle_name }}
                    </text>
                </view>
            </view>

            <!-- 预约详情 -->
            <view class="payment_box">
                <view class="orderNum_box">
                    <view class="left_lv_box"></view>
                    <view class="zs_order_num_box">预约详情</view>
                </view>
                <view class="ds_box">
                    <view class="left_txt">下单时间</view>
                    <view class="right_txt">{{ orderObj.created_at }}</view>
                </view>
                <view class="ds_box">
                    <view class="left_txt">垃圾品类</view>
                    <view class="right_txt">{{ orderObj.waste_name }}</view>
                </view>
                <view class="xc_pic_box">
                    <view class="xc_pic_title_box">垃圾现场照片</view>
                    <view class="zs_pic_box">
                        <view class="pic_box" v-for="(item, index) in orderObj.environment_imgs" :key="index">

                            <image :src="item" mode="scaleToFill" @click="ClickImage(item)" />
                        </view>
                        <view style="width: 154rpx;" v-for="i in 3"></view>
                    </view>
                </view>

            </view>


            <!-- 现场勘察信息 v-if="orderObj.status == '5' || orderObj.status == '3'"-->
            <!-- orderObj -->
            <template v-if="orderObj.survey_id > 0">
                <view class="information_box" v-if="orderObj.status == '5' || orderObj.status == '3'">
                    <view class="orderNum_box">
                        <view class="left_lv_box"></view>
                        <view class="zs_order_num_box">现场勘察信息</view>
                    </view>
                    <view class="xing_call_box">
                        <view class="xing_top_box">勘察员姓名：{{ orderObj.survey_name }}</view>
                        <view class="call_bot_box">勘察员电话：{{ orderObj.survey_phone }}</view>
                    </view>

                    <view class="ds_box">
                        <view class="left_txt" v-if="orderObj.category_id == '1'">垃圾袋数</view>
                        <view class="left_txt" v-if="orderObj.category_id == '2'">车辆数</view>
                        <view class="right_txt">{{ orderObj.survey_num * 1 }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt">产品名称</view>
                        <view class="right_txt">{{ orderObj.product_name }}</view>
                    </view>
                    <!-- <view class="ds_box">
                    <view class="left_txt">是否沿街</view>
                    <view class="right_txt">{{ orderObj.position_name }}</view>
                </view> -->
                    <view class="ds_box" v-if="orderObj.category_id == '2'">
                        <view class="left_txt">清运车型</view>
                        <view class="right_txt">{{ orderObj.vehicle_name }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt">垃圾品类</view>
                        <view class="right_txt">{{ orderObj.survey_waste_name }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt">订单备注</view>
                        <view class="right_txt">{{ orderObj.survey_remark }}</view>
                    </view>

                    <view class="xc_pic_box">
                        <view class="xc_pic_title_box">垃圾现场照片</view>
                        <view class="zs_pic_box">
                            <view class="pic_box" v-for="(item, index) in orderObj.survey_img_url" :key="index">

                                <image :src="item" mode="scaleToFill" @click="ClickImage(item)" />
                            </view>
                            <view style="width: 154rpx;" v-for="i in 3"></view>
                        </view>
                    </view>
                </view>
            </template>

            <!-- 付款信息 -->
            <view class="payment_box"
                v-if="orderObj.status == '5' || orderObj.status == '3' || orderObj.status == '2' || orderObj.status == '1'">
                <view class="orderNum_box">
                    <view class="left_lv_box"></view>
                    <view class="zs_order_num_box">付款信息</view>
                </view>
                <!-- 待支付-------待支付定金 -->
                <template v-if="orderObj.status == '1' || orderObj.status == '2'">
                    <view class="ds_box">
                        <view class="left_txt" style="color: rgba(0, 0, 0, 1);font-weight: 700;">{{ orderObj.status ==
            "1" ? '待' : '已' }}支付定金</view>
                        <view class="right_txt" v-if="orderObj.status == 1"
                            style="color: rgba(255, 141, 26, 1);font-weight: 700;">¥{{
            orderObj.first_pay_money }}</view>
                        <view class="right_txt" v-else style="color:  rgba(0, 0, 0, 1);font-weight: 700;">¥{{
            orderObj.first_pay_money }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt" style="color: rgba(128, 128, 128, 1);font-weight: 400;font-size: 28rpx;">
                            预估尾款</view>
                        <view class="right_txt" style="color:  rgba(0, 0, 0, 1);font-weight: 700;">¥{{
            orderObj.estimate_balance_money }}</view>
                    </view>

                </template>
                <template v-else>
                    <view class="ds_box">
                        <view class="left_txt">订单总金额</view>
                        <view class="right_txt">¥{{ orderObj.total_money }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt">{{ orderObj.status == "1" ? '待' : '已' }}支付定金</view>
                        <view class="right_txt">¥{{ orderObj.first_pay_money }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt">优惠券</view>
                        <view class="right_txt">¥{{ orderObj.credit }}</view>
                    </view>
                    <view class="ds_box">
                        <view class="left_txt" style="color: rgba(128, 128, 128, 1);font-weight: 400;font-size: 28rpx;">
                            预估尾款</view>
                        <view class="right_txt" style="color:  rgba(0, 0, 0, 1);font-weight: 400;">¥{{
            orderObj.estimate_balance_money }}</view>
                    </view>
                    <template>
                        <view class="ds_box" v-if="orderObj.status == '3'">
                            <view class="left_txt" style="font-weight: 700;color: rgba(0, 0, 0, 1);">待结清金额</view>
                            <view class="right_txt" style="font-weight: 700;color: rgba(255, 141, 26, 1);">
                                ¥{{ (orderObj.survey_last_pay_money)
                                }}</view>
                        </view>
                        <view class="ds_box" v-if="orderObj.status == '5'">
                            <view class="left_txt">尾款结清金额</view>
                            <view class="right_txt">¥{{ orderObj.survey_last_pay_money }}</view>
                        </view>
                    </template>
                </template>
            </view>

            <!-- 支付定金 -->
            <view class="advance_box" v-if="orderObj.status == '1' && admin != '1'">
                <view class="dange_pay_box" :class="'dange_pay_box_' + item.id" v-for="(item, index) in payList"
                    :key="index" @click="$noMultipleClicks(paysubmit, item)">
                    {{ item.text }}
                </view>
            </view>
            <!-- 申请退款 -->
            <view class="advance_box" v-if="orderObj.status == '2' && admin != '1'">
                <view class=" dange_pay_box" :class="'dange_pay_box_' + 1" @click="$noMultipleClicks(drawback)">
                    申请退款
                </view>
            </view>


            <template v-if="admin != '1'">
                <!-- (orderObj.credit* 1)>0 -->
                <view class="qianshu_box" v-if="orderObj.status == '3'">{{ orderObj.survey_last_pay_money }}<text
                        style="font-size: 26rpx;font-weight: 400;line-height: 36.4rpx;color: rgba(128, 128, 128, 1);margin-right: 12rpx;">元</text>
                    <text v-if="orderObj.credit * 1 > 0"
                        style="font-size: 28rpx;font-weight: 400;line-height: 36.4rpx;color: rgba(0, 0, 0, 1); text-decoration: line-through;">{{
            (orderObj.survey_last_pay_money*1) + (orderObj.credit*1)}}元</text>
                </view>
                <view class="yh_box" v-if=" orderObj.credit* 1 > 0">券 -{{ orderObj.credit*1 }}元</view>
                <view class="zhifu_box" v-if="orderObj.status == '3'" @click="$noMultipleClicks(submit)">确认结清</view>
            </template>
        </scroll-view>

    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            noClick: true,//防连点
            subId: '',//2：待清运 3：已完成
            order_id: '',//订单id
            orderObj: {},
            pay_status: '',
            admin: '',
            payList: [
                {
                    id: 1,
                    text: '取消订单'
                },
                {
                    id: 2,
                    text: '继续支付'
                },
            ],
        }
    },
    onLoad(options) {
        this.subId = options.subId
        this.order_id = options.order_id
        this.pay_status = options.pay_status
        this.admin = options.admin
    },
    onShow() {
        uni.setStorageSync('lower', true)
        this.ordershow()//订单详情
    },
    methods: {
        // 支付尾款
        submit() {
            let data = {
                order_id: this.order_id
            }
            this.$Request.post(this.$api.order.orderLast_pay, data).then(res => {
                if (res.code == 200) {
                    this.Payment(res.data)
                }
            })
        },
        ClickImage(PhotoAddress) {
            uni.previewImage({
                urls: [PhotoAddress], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
                current: '', // 当前显示图片的http链接，默认是第一个
                success: function (res) { },
                fail: function (res) { },
                complete: function (res) { },
            })
        },
        Payment(pay_data) {
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: pay_data.timeStamp.toString(),
                nonceStr: pay_data.nonceStr,
                signType: 'MD5',
                package: pay_data.package,
                paySign: pay_data.paySign,
                success(res) {
                    console.log(res)
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                        uni.setStorageSync('lower', false)
                        uni.setStorageSync('active', 5);
                    }, 1000)
                },
                fail(err) {
                    console.log(err)
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                        uni.setStorageSync('lower', false)
                        uni.setStorageSync('active', 3);
                    }, 1000)
                }
            })
        },
        // 定金待支付
        paysubmit(item) {
            // id==1取消订单==2继续支付定金
            if (item.id == 1) {
                uni.showModal({
                    title: '确定取消订单？',
                    content: '',
                    showCancel: true,
                    success: (res) => {
                        if (res.confirm) {
                            let data = {
                                order_id: this.order_id
                            }
                            this.$Request.post(this.$api.order.orderCancel, data).then(res => {
                                if (res.code == 200) {
                                    uni.showToast({
                                        title: '取消成功',
                                        icon: 'none'
                                    })
                                    setTimeout(() => {
                                        uni.setStorageSync('active', 0);
                                        uni.setStorageSync('lower', false)
                                        uni.navigateBack()
                                    }, 600)
                                }
                            })
                        } else if (res.cancel) {
                            console.log('取消')
                        }
                    }
                })
            } else {

                let data = {
                    order_id: this.orderObj.id,
                    category_id: this.orderObj.category_id,
                    position_id: this.orderObj.position_id,
                    product_id: this.orderObj.product_id,
                    num: this.orderObj.num * 1,
                    waste_id: this.orderObj.waste_id,
                    coupon_list_id: this.orderObj.coupon_list_id,
                    address_id: this.orderObj.address_id,
                    appointment_time: this.orderObj.appointment_time,
                    vehicle_id: this.orderObj.vehicle_id
                }
                this.$Request.post(this.$api.order.orderAdd, data).then(res => {
                    if (res.code == 200) {
                        this.downPayment(res.data)
                    }
                })


            }
        },
        // 拉起支付
        downPayment(pay_data) {
            uni.requestPayment({
                provider: 'wxpay',
                timeStamp: pay_data.timeStamp.toString(),
                nonceStr: pay_data.nonceStr,
                signType: 'MD5',
                package: pay_data.package,
                paySign: pay_data.paySign,
                success(res) {
                    console.log(res)
                    uni.showToast({
                        title: '支付成功',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.navigateTo({
                            url: '/orderPage/successful/successful'
                        })
                    }, 1000)
                },
                fail(err) {
                    console.log(err)
                    uni.showToast({
                        title: '支付失败',
                        icon: 'none'
                    })
                    setTimeout(() => {
                        uni.setStorageSync('active', 1);
                        uni.setStorageSync('lower', false)
                        uni.navigateBack()
                    }, 1000)
                }
            })
        },
        // 申请退款
        drawback() {
            uni.showModal({
                title: '确定退款？',
                content: '',
                showCancel: true,
                success: (res) => {
                    if (res.confirm) {
                        let data = {
                            order_id: this.order_id
                        }
                        this.$Request.post(this.$api.order.orderRefund, data).then(res => {
                            if (res.code == 200) {
                                uni.showToast({
                                    title: '退款成功',
                                    icon: 'none'
                                })
                                setTimeout(() => {

                                    uni.setStorageSync('active', -1)
                                    uni.setStorageSync('lower', false)
                                    uni.navigateBack()
                                }, 600)
                            }
                        })
                    } else if (res.cancel) {
                        console.log('取消')
                    }
                }
            })
        },
        ordershow() {
            let data = {
                order_id: this.order_id
            }
            this.$Request.post(this.$api.order.orderDetail, data).then(res => {
                if (res.code == 200) {
                    this.orderObj = res.data
                }

            })
        }
    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    background-color: rgba(246, 246, 246, 1);

    .concent_box {
        width: 100%;
        height: calc(100vh - 190rpx);

        .fubiaoti_box {
            width: 750rpx;
            height: 92rpx;
            background: rgba(255, 255, 255, 1);
            box-sizing: border-box;
            padding-left: 34rpx;
            line-height: 92rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(26, 194, 121, 1);
        }

        .dd_box {
            width: 700rpx;
            height: 98rpx;
            line-height: 98rpx;
            margin: auto;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 1);
        }

        .dange_order_box {
            width: 700rpx;
            // height: 834rpx;
            border-radius: 26rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            box-sizing: border-box;
            margin-bottom: 20rpx;
            padding-bottom: 20rpx;

            .orderNum_box {
                width: 100%;
                height: 90rpx;
                // border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;

                .left_lv_box {
                    width: 6rpx;
                    height: 22rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 30rpx;

                }

                .zs_order_num_box {
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .zc_type_box {
                width: 100%;
                height: 154rpx;
                border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                box-sizing: border-box;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .le_box {
                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    box-sizing: border-box;
                    padding-left: 34rpx;

                    .cc_box {
                        width: 88rpx;
                        height: 88rpx;
                        border-radius: 50%;
                        background-color: #e8fcee;
                        margin-right: 22rpx;

                        image {
                            width: 100%;
                            height: 100%;
                            border-radius: 50%;
                        }
                    }

                    .xx_box {
                        height: 88rpx;

                        .xx_top_box {
                            width: 180rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            font-weight: 500;
                            line-height: 40rpx;
                        }

                        .xx_bot_box {
                            height: 40rpx;
                            line-height: 40rpx;
                            font-size: 28rpx;
                            font-weight: 500;
                            line-height: 40rpx;
                            display: flex;
                            justify-content: flex-start;
                            align-items: center;
                        }
                    }
                }

                .r_box {

                    width: 50%;
                    height: 88rpx;
                    display: flex;
                    justify-content: space-around;
                    align-items: center;

                    .daishu_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 88rpx;
                        color: rgba(0, 0, 0, 1);
                    }

                    .yg_box {
                        height: 88rpx;
                        font-size: 24rpx;
                        font-weight: 400;
                        line-height: 88rpx;
                        color: rgba(0, 0, 0, 1);
                    }
                }
            }

            .zclx_box {
                width: 100%;
                box-sizing: border-box;
                padding: 0 30rpx;
                padding-top: 32rpx;
                margin-bottom: 20rpx;

                .xing_box {
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    line-height: 40rpx;
                    color: rgba(0, 0, 0, 1);
                    margin-bottom: 16rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .dizhi_box {
                    width: 100%;
                    // height: 40rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    flex-wrap: nowrap;

                    .jt_box {
                        // width: 400rpx;
                        margin-left: 10rpx;
                        // white-space: nowrap;
                        // overflow: hidden;
                        // text-overflow: ellipsis;

                    }
                }
            }

            .yuyue {
                width: 100%;
                height: 80rpx;
                line-height: 80rpx;
                box-sizing: border-box;
                padding-left: 34rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(0, 0, 0, 1);
                box-sizing: border-box;
                padding-right: 22rpx
            }

            .xc_pic_box {
                width: 100%;
                padding: 0 34rpx;
                box-sizing: border-box;

                .xc_pic_title_box {
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(128, 128, 128, 1);
                    margin-bottom: 14rpx;
                }

                .zs_pic_box {
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;

                    .pic_box {
                        width: 154rpx;
                        height: 132rpx;
                        flex-shrink: 0;
                        margin-bottom: 14rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

            .prc_box {
                width: 100%;
                height: 100rpx;
                box-sizing: border-box;
                padding: 0 24rpx 0 32rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .left_trxt_box {
                    height: 100rpx;
                    line-height: 100rpx;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: rgba(0, 0, 0, 1);
                }

                .czbtn_box {
                    width: 220rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);


                }

                .czbtn1_box {
                    width: 168rpx;
                    height: 56rpx;
                    border-radius: 12rpx;
                    border: 2rpx solid rgba(26, 194, 121, 1);
                    text-align: center;
                    line-height: 56rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(26, 194, 121, 1);


                }
            }

        }


        .information_box {
            width: 700rpx;
            // min-height: 830rpx;
            border-radius: 26rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-bottom: 20rpx;
            box-sizing: border-box;
            padding-bottom: 20rpx;

            .orderNum_box {
                width: 100%;
                height: 90rpx;
                // border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                // margin-bottom: 10rpx;

                .left_lv_box {
                    width: 6rpx;
                    height: 22rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 30rpx;

                }

                .zs_order_num_box {
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .xing_call_box {
                width: 100%;
                height: 80rpx;
                box-sizing: border-box;
                padding-left: 34rpx;
                margin-bottom: 28rpx;

                .call_bot_box,
                .xing_top_box {
                    width: 100%;
                    height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    letter-spacing: 0rpx;
                    line-height: 40rpx;
                    color: rgba(128, 128, 128, 1);
                }

            }

            .ds_box {
                width: 100%;
                height: 40rpx;
                box-sizing: border-box;
                padding: 0 48rpx 0 34rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 28rpx;

                .left_txt {
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    letter-spacing: 0rpx;
                    color: rgba(128, 128, 128, 1);
                }

                .right_txt {
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .xc_pic_box {
                width: 100%;
                padding: 0 34rpx;
                box-sizing: border-box;

                .xc_pic_title_box {
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(128, 128, 128, 1);
                    margin-bottom: 14rpx;
                }

                .zs_pic_box {
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;

                    .pic_box {
                        width: 154rpx;
                        height: 132rpx;
                        flex-shrink: 0;
                        margin-bottom: 14rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }

        }

        .payment_box {
            width: 700rpx;
            // height: 358rpx;
            border-radius: 26rpx;
            background: rgba(255, 255, 255, 1);
            margin: auto;
            margin-bottom: 20rpx;
            box-sizing: border-box;
            padding-bottom: 20rpx;

            .orderNum_box {
                width: 100%;
                height: 90rpx;
                // border-bottom: 2rpx solid rgba(245, 245, 245, 1);
                display: flex;
                justify-content: flex-start;
                align-items: center;
                // margin-bottom: 10rpx;

                .left_lv_box {
                    width: 6rpx;
                    height: 22rpx;
                    background: rgba(26, 194, 121, 1);
                    margin-right: 30rpx;

                }

                .zs_order_num_box {
                    height: 90rpx;
                    line-height: 90rpx;
                    font-size: 32rpx;
                    font-weight: 700;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .ds_box {
                width: 100%;
                height: 40rpx;
                box-sizing: border-box;
                padding: 0 48rpx 0 34rpx;
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 28rpx;

                .left_txt {
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    letter-spacing: 0rpx;
                    color: rgba(128, 128, 128, 1);
                }

                .right_txt {
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 500;
                    color: rgba(0, 0, 0, 1);
                }
            }

            .xc_pic_box {
                width: 100%;
                padding: 0 34rpx;
                box-sizing: border-box;

                .xc_pic_title_box {
                    width: 100%;
                    height: 40rpx;
                    line-height: 40rpx;
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(128, 128, 128, 1);
                    margin-bottom: 14rpx;
                }

                .zs_pic_box {
                    width: 100%;
                    display: flex;
                    justify-content: space-around;
                    flex-wrap: wrap;

                    .pic_box {
                        width: 154rpx;
                        height: 132rpx;
                        flex-shrink: 0;
                        margin-bottom: 14rpx;

                        image {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
            }
        }

        .advance_box {
            width: 100%;
            height: 160rpx;
            background: rgba(255, 255, 255, 1);
            display: flex;
            justify-content: flex-end;
            align-items: center;
            box-sizing: border-box;
            padding: 0 30rpx;

            .dange_pay_box {
                width: 168rpx;
                height: 68rpx;
                border-radius: 12rpx;
                text-align: center;
                margin-left: 38rpx;
                line-height: 68rpx;

                &.dange_pay_box_1 {
                    border: 2rpx solid rgba(229, 229, 229, 1);
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(0, 0, 0, 1);
                }

                &.dange_pay_box_2 {
                    background: rgba(26, 194, 121, 1);
                    font-size: 28rpx;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }

        }

        .qianshu_box {
            margin-top: 60rpx;
            width: 100%;
            text-align: center;
            height: 72rpx;
            font-size: 72rpx;
            font-weight: 700;
            line-height: 72rpx;
            color: rgba(0, 0, 0, 1);
            margin-bottom: 18rpx;

        }

        .yh_box {
            width: 100rpx;
            height: 28rpx;
            border-radius: 6rpx;
            border: 2rpx solid rgba(255, 141, 26, 1);
            text-align: center;
            line-height: 26rpx;
            font-size: 20rpx;
            font-weight: 400;
            color: rgba(255, 141, 26, 1);
            margin-bottom: 18rpx;
            margin: auto;

        }

        .zhifu_box {
            width: 600rpx;
            height: 100rpx;
            opacity: 1;
            border-radius: 23.22rpx;
            background: rgba(26, 194, 121, 1);
            line-height: 100rpx;
            text-align: center;
            font-size: 30rpx;
            font-weight: 500;
            letter-spacing: 0rpx;
            color: rgba(255, 255, 255, 1);
            margin: 12rpx auto;

        }
    }



}
</style>